﻿var $ = jQuery.noConflict();
var hostDTCS = "http://local.stylist.vn";
$.ajax({
    url: hostDTCS + '/Handlers/EventHandler.ashx?',
    data: { 'command': 'boxnhung' },
    type: 'POST',
    dataType: "jsonp",
    success: function (result) {
        $("#box-dtcs").html(result);
        $("#boxnhung ul li").addClass("dtcs-item");
        $("#boxnhung ul").each(function () {
            $(this).mcgSlider({
                slideItemElement: ".dtcs-item",
                preButton: $(".dtcs-pre"),
                nextButton: $(".dtcs-next"),
                numberOfVisibleSlides: 4,
                duration: 10000
            });
        });
        boxHover();
    }
});

function boxHover() {
    $('.dtcs-item').each(function () {
        $(this).hover(function () {
            $(this).find('.boxnhung-title').fadeIn();
            $(this).find('.boxnhung-vote').fadeIn();
            $(this).find('.boxnhung-img img').css('opacity', '0.4').css('transition', 'opacity .4s ease-out');
        }, function () {
            $(this).find('.boxnhung-title').hide();
            $(this).find('.boxnhung-vote').hide();
            $(this).find('.boxnhung-img img').css('opacity', '1');
        });
    });
}

$.fn.mcgSlider = function (options) {
    var settings = $.extend({
        slideItemElement: ".mcgSlideItem",
        nextButtonElement: undefined,
        preButtonElement: undefined,
        preButton: undefined,
        nextButton: undefined,
        numberOfVisibleSlides: 1,
        auto: true,
        duration: 8000,
        speed: 600,
        autoWidth: false,
        effect: true
    }, options);

    var container = undefined;
    var view = undefined;
    var numberOfSlides = 0;
    var widthOfEachSlide = 0;
    var currentPosition = 0;
    var isLock = false;
    var mcgInterval = undefined;
    var base = $(this);

    function init() {
        var slides = base.find(settings.slideItemElement);
        if (slides.length > 0) {
            slides.hide();

            var firstSlide = slides.first();
            widthOfEachSlide = settings.numberOfVisibleSlides * (firstSlide.width() + parseFloat(firstSlide.css('padding-left')) + parseFloat(firstSlide.css('padding-right')) + parseFloat(firstSlide.css('margin-left')) + parseFloat(firstSlide.css('margin-right')));
            numberOfSlides = Math.ceil(slides.length / settings.numberOfVisibleSlides);

            slides.css({
                "display": "inline-block",
                "float": "left"
            });

            slides.wrapAll("<div class=\"mcgContainer\"></div>");
            container = base.find(".mcgContainer:first");
            container.css({
                "float": "left",
                "width": numberOfSlides * widthOfEachSlide + "px"
            });

            container.wrapAll("<div class=\"mcgView\"></div>");
            view = base.find(".mcgView:first");
            view.css({
                "position": "relative",
                "display": "block",
                "overflow": "hidden"
            });

            if (!settings.autoWidth) {
                view.css({
                    "width": widthOfEachSlide + "px"
                });
            }

            slides.show();

            var preButton = undefined;
            var nextButton = undefined;

            if (settings.preButton != undefined) {
                preButton = $(settings.preButton);
            } else {
                if (settings.preButtonElement != undefined) {
                    preButton = base.find(settings.preButtonElement);
                }
            }

            if (settings.nextButton != undefined) {
                nextButton = $(settings.nextButton);
            } else {
                if (settings.nextButtonElement != undefined) {
                    nextButton = base.find(settings.nextButtonElement);
                }
            }

            if (preButton != undefined) {
                preButton.click(function () {
                    if (!isLock)
                        changePositionToLeft();
                });
            }

            if (nextButton != undefined) {
                nextButton.click(function () {
                    if (!isLock)
                        changePosition();
                });
            }

            $([nextButton, preButton]).each(function () {
                $(this).css({ "cursor": "pointer" });
            });
            $([nextButton, preButton, slides]).each(function () {
                if ($(this) != undefined) {
                    $(this).hover(
                    function () {
                        pause();
                    },
                    function () {
                        autoRun();
                    });
                }
            });
            autoRun();
        }
    };

    function autoRun() {
        if (settings.auto) {
            mcgInterval = setInterval(function () { if (!isLock) changePosition(); }, settings.duration);
        }
    }

    function pause() {
        clearInterval(mcgInterval);
    }

    function moveSlide() {
        if (container != undefined) {

            container.stop(true, true).animate({ 'marginLeft': widthOfEachSlide * (-currentPosition) }, settings.effect ? settings.speed : 0);

        }
    }

    function changePosition() {

        if (currentPosition == numberOfSlides - 1) {
            currentPosition = 0;
        } else {
            currentPosition++;
        }
        moveSlide();
    }

    function changePositionToLeft() {
        if (currentPosition <= 0) {
            currentPosition = numberOfSlides - 1;
        } else {
            currentPosition--;
        }
        moveSlide();
    }

    return this.each(function () {
        init();
    });

};